<template>
    <div class="app-container home">
        <BankCard v-if="info.bankName" :bankInfo="info"></BankCard>
        <div class="info">
            <div class="item">
                <div class="left">姓名</div>
                <div class="right">
                    {{ info.settleInfoBean.bankAccountName }}
                </div>
            </div>
            <div class="item">
                <div class="left">身份证号</div>
                <div class="right" v-if="info.settleInfoBean.identityNo">
                    {{ replaceStr(3, 15, info.settleInfoBean.identityNo) }}
                </div>
            </div>
        </div>
        <div class="btn">
            <van-button @click="goEdit" style="border:none" type="primary" block>变更结算卡</van-button>
        </div>
    </div>
</template>

<script setup name="mySettlement">
import BankCard from '@/components/BankCard.vue'
import { replaceStr } from '@/utils/utils'

import { findByAgentNoBankInfo } from '../../api/wallet'
const router = useRouter()
const info = ref({
    settleInfoBean: {}
})
const getFindByAgentNoBankInfo = () => {
    findByAgentNoBankInfo().then(res => {
        info.value = res.object
        info.value.settleInfoBean.bankAccountName = nameDesensitization(info.value.settleInfoBean.bankAccountName)
    })
}
const goEdit = () => {
    router.push({
        path: '/editSettlement'
    })
}
const nameDesensitization = str => {
    if (null == str || str == undefined || str.length == 0) {
        return ''
    }
    if (str.length == 1) {
        return str
    }
    if (str.length == 2) {
        return str.substring(0, 1) + '*' //截取name 字符串截取第一个字符，
    }

    let starStr = ''
    for (let index = 0; index < str.length - 2; index++) {
        starStr += '*'
    }
    return str.substring(0, 1) + starStr + str.substring(str.length - 1, str.length)
}
getFindByAgentNoBankInfo()
</script>

<style scoped lang="scss">
.app-container {
    padding: 10px;
    .info {
        margin-top: 10px;
        background: #ffffff;
        overflow: hidden;
        opacity: 1;
        border-radius: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        padding: 10px;
        color: #545454;
        opacity: 1;
        .item {
            display: flex;
            background: #ffffff;
            padding: 10px;
            .left {
                width: 33%;
            }
            .right {
                flex: 1;
            }
        }
    }
    .btn {
        margin-top: 10px;
        border-radius: 10px;
        overflow: hidden;
        .van-button--primary{
            background: #66d6ff;
        }
    }
}
</style>
